Plantilla de flujo de pantalla
Validar componentes visuales de la pantalla en un flujo de usuario.
Acerca de la plantilla de flujo de pantalla
Los flujos de pantalla (también conocidos como "wireflows") son una combinación de wireframes y la creación de un diagrama de flujo. El flujo de extremo a extremo traza lo que los usuarios ven en cada pantalla y cómo impacta su proceso de toma de decisiones a través de tu producto o servicio. Con esa información en mano, puedes explicar mejor las decisiones que has tomado respecto al diseño de interacción.
Usa la plantilla de flujo de pantalla para encontrar nuevas oportunidades que hagan que la experiencia del usuario sea fluida y sin frustraciones de principio a fin.
Si te interesa desarrollar tu trabajo aún más y adentrarte en el ámbito del diseño UX, donde puedes mostrar el recorrido del usuario como un diagrama de flujo con textos y símbolos en lugar de pantallas, te puede interesar la Plantilla de flujo de usuario.
Sigue leyendo para obtener más información sobre los flujos de pantalla.
¿Qué es un flujo de pantalla?
Un flujo de pantallas (o wireflow) reúne un diseño de varias pantallas, conectadas como un diagrama de flujo para mapear los puntos de decisión y movimientos de un cliente de principio a fin.
Los wireframes por sí solos carecen de contexto sobre cómo podría ser un flujo de usuario interactivo, página por página. Los flujos de UX por sí solos son más abstractos y no pueden mostrarte lo que realmente está viendo tu cliente.
Los wireflows, o flujos de pantalla, combinan las fortalezas de ambos métodos y te ayudan a demostrar cómo lo que ve el usuario tiene un gran impacto en cómo experimentan tu producto o servicio.
Cuándo usar Screen Flows
Los wireframes ayudan a los equipos de UX y de producto a pensar en el recorrido de un cliente como un flujo completo en lugar de un conjunto de pantallas. El wireflow o flujo de pantallas se centra en las propias pantallas y la interacción del cliente con tu servicio o producto.
Un diseñador puede diseñar un flujo de pantallas cuando necesitan ...
Asegúrate de que no haya escenarios faltantes: con un recorrido de principio a fin trazado, puedes considerar todos los casos de uso potenciales que se aplican a las necesidades del cliente.
Mejora las interacciones con los usuarios: conoce a tu cliente en cada oportunidad del flujo, como los registros, las confirmaciones o las ventanas emergentes.
Crea una mejor comunicación interfuncional: une a diseñadores y desarrolladores, alentándolos a pensar en toda la experiencia en lugar de pantallas separadas.
Participa en la educación de las partes interesadas: si los clientes o equipos nunca han considerado lo que el cliente ve al moverse por tu producto o experiencia, seguir un flujo ayuda a construir empatía hacia los puntos problemáticos del cliente.
Crea tu propio flujo de pantalla
Es fácil hacer que tu pantalla fluya. La plataforma de colaboración virtual de Miro ofrece el lienzo perfecto para crear y compartirlos. Empieza seleccionando la plantilla de Screen Flow, luego sigue los siguientes pasos para crear uno propio.
1. Define tu historia de usuario
Antes de comenzar a mapear una secuencia visual, describe las necesidades y puntos problemáticos de tus usuarios que deben resolverse. Este es tu fundamento para establecer un punto de partida para tu flujo de pantalla.
2. Decide qué mostrarán tus pantallas clave
Reflexiona sobre tus puntos de inicio y final en el recorrido. ¿Necesitas una página de inicio? Pantalla de formulario de registro ¿Página de confirmación? Identifica cambios o pasos adicionales al proceso, como páginas que necesitan dividirse o pantallas que deben agregarse. Miro es el creador de wireframes perfecto con una biblioteca de wireframes que tiene más de 15 componentes de UI que puedes agregar fácilmente a tu flujo de pantallas.
3. Conecta las pantallas
Añade y mueve flechas entre cada pantalla para avanzar al usuario en la tarea, usando la herramienta de Línea de Conexión de Miro. También puedes incluir puntos de decisión y mostrar qué sucede en cada instancia disponible al usuario.
4. Comparte el flujo de tu pantalla con tu equipo o partes interesadas para obtener comentarios
Puedes usar la función de Menciones de Miro para etiquetar a tu equipo o a personas individuales para rondas rápidas de comentarios, críticas de diseño o revisiones antes de las sesiones de taller en vivo con clientes. También puedes compartir tu tablero de Miro con cualquier persona (¡incluso si no están registradas!) haciendo clic en el botón Invitar miembros.
Descubre más ejemplos de flujo de usuarios para ayudarte a construir tu próximo gran proyecto.
¿Qué es un flujo de pantalla en UX?
Un flujo de pantalla te ayuda a analizar las interacciones de sus usuarios, centrándose principalmente en las pantallas de sus productos. Combina lo mejor del wireframing y de los diagramas de flujo, ofreciéndote una visión más detallada del flujo de tus clientes y, por tanto, más datos para construir una mejor experiencia de usuario.
Comienza ahora mismo con esta plantilla.
Plantilla de wireframes de baja fidelidad
Ideal para:
Desk Research, Product Management, Wireframes
Cuando diseñas un sitio o desarrollas una aplicación, debes pensar las etapas iniciales en GRANDE: ver el gran panorama general y comunicar la gran idea. Los wireframes de baja fidelidad te ayudan a ver y lograr lo anterior. Estos diseños bocetados (piensa en ellos como si fueran la versión digital del dibujo en la servilleta) permiten que tus equipos y los interesados en el proyecto puedan determinar rápidamente si un diseño satisface las necesidades de los usuarios. Nuestra plantilla te permite usar wireframes en reuniones o talleres, presentaciones y sesiones de revisión con facilidad.
Plantilla de wireframes de aplicaciones
Ideal para:
Diseño UX, Wireframes
¿Listo para empezar a desarrollar una aplicación? No imagines únicamente cómo funcionará y cómo los usuarios van a interactuar con ella; deja que un wireframe te lo muestre. Wireframing es una técnica para crear un diseño básico de cada pantalla. Si usas un wireframe, preferentemente en una etapa temprana del proceso, entenderás lo que cada pantalla logrará y obtendrás la aprobación de los interesados importantes, todo antes de agregar el diseño y el contenido, lo cual te ahorrará tiempo y dinero. Y si piensas en las cosas tomando en cuenta el recorrido del usuario, ofrecerás una experiencia más atractiva y exitosa.
Plantilla para hacer bocetos online
Ideal para:
Diseño UX, Desk Research , Design Thinking
Antes de que pongas en marcha una idea prometedora y le dediques toda tu energía, obsérvala desde un nivel superior: conocer cómo funciona y cuán bien cumple tus objetivos. Eso es lo que hacen los bocetos. Esta plantilla te brinda una herramienta poderosa de colaboración a distancia para las etapas iniciales del prototipo, independientemente de que estés haciendo el boceto de páginas web y aplicaciones móviles, diseñando logotipos o planificando eventos. De este modo podrás compartir fácilmente tu boceto con el equipo y guardar cada etapa de tu boceto antes de cambiarlo y desarrollarlo.
Plantilla de wireframe de sitios web
Ideal para:
Wireframes, Experiencia del usuario
Wireframing es un método para diseñar un sitio web a nivel estructural. Un wireframe es una composición estilizada de una página web que muestra los elementos de la interfaz en cada página. Usa esta plantilla de wireframes para iterar en páginas web de forma rápida y económica. Puedes compartir el wireframe con clientes o compañeros de equipo y colaborar con interesados. Los wireframes permiten a los equipos conseguir la aprobación de los interesados sin invertir demasiado tiempo o recursos. Ayudan a garantizar que la estructura y el flujo de tu sitio web satisfagan las necesidades y expectativas del usuario.